<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Display Container</title>
  <style>
    #container {
      width: 650px;
    }

    #world {
      float: left;
      border: 1px solid gray;
    }

    .options {
      float: left;
      border: 1px solid gray;
      width: 300px;
      height: 300px;
      font-size: 12px;
    }

    .options .options_container {
      padding: 10px;
    }

    .options_container div {
      margin-bottom: 5px;
      height: 25px;
    }

    .options label {
      width: 100px;
      display: inline-block;
    }
  </style>
</head>

<body>

  <h1>Display Container</h1>

  <div id="container">
    <canvas id="world" width="300" height="300"></canvas>
    <div class="options">
      <div class="options_container">
        <div>
          <button id="btn_add">ADD CHILD</button>
          <button id="btn_remove">REMOVE CHILD</button>
        </div>
        <div>
          <label for="translate_x">Translate X</label>
          <input type="range" id="translate_x" name="translate_x" min="-150" max="150" value="0">
        </div>
        <div>
          <label for="translate_y">Translate Y</label>
          <input type="range" id="translate_y" name="translate_y" min="-150" max="150" value="0">
        </div>
        <div>
          <label for="scale_x">Scale X</label>
          <input type="range" id="scale_x" name="scale_x" min="0.1" max="2" value="1" step="0.1">
        </div>
        <div>
          <label for="scale_y">Scale Y</label>
          <input type="range" id="scale_y" name="scale_y" min="0.1" max="2" value="1" step="0.1">
        </div>
        <div>
          <label for="skew_x">Skew X</label>
          <input type="range" id="skew_x" name="skew_x" min="0" max="3.14" value="0" step="0.1">
        </div>
        <div>
          <label for="skew_y">Skew Y</label>
          <input type="range" id="skew_y" name="skew_y" min="0" max="3.14" value="0" step="0.1">
        </div>
        <div>
          <label for="rotate">Rotate</label>
          <input type="range" id="rotate" name="rotate" min="0" max="6.28" value="0" step="0.1">
        </div>
      </div>
    </div>
  </div>

  <script src="../dist/stage.js"></script>
  <script>

    const stage = new stg.Stage('world');
    const parent = new stg.DisplayContainer();
    parent.centerX = 150;
    parent.centerY = 150;
    stage.addChild(parent);

    document.getElementById('btn_add').addEventListener('click', (event) => {
      const g = new stg.Graphics();
      g.fillStyle = 'rgb(' + rand(0, 255) + ',' + rand(0, 255) + ',' + rand(0, 255) + ')';
      g.fillRect(0, 0, rand(30, 50), rand(30, 50));

      const child = new stg.Shape(g);
      child.width = 1;
      child.height = 1;
      child.x = rand( 0, 290 );
      child.y = rand( 0, 290 );
      parent.addChild(child);
      stage.update();
    });

    document.getElementById('btn_remove').addEventListener('click', () => {
      parent.removeChildAt(parent.children.length - 1);
      stage.update();
    });

    document.getElementById('translate_x').addEventListener('input', (event) => {
      parent.x = parseFloat(event.target.value);
      stage.update();
    });

    document.getElementById('translate_y').addEventListener('input', (event) => {
      parent.y = parseFloat(event.target.value);
      stage.update();
    });

    document.getElementById('scale_x').addEventListener('input', (event) => {
      parent.scaleX = parseFloat(event.target.value);
      stage.update();
    });

    document.getElementById('scale_y').addEventListener('input', (event) => {
      parent.scaleY = parseFloat(event.target.value);
      stage.update();
    });

    document.getElementById('skew_x').addEventListener('input', (event) => {
      parent.skewX = parseFloat(event.target.value);
      stage.update();
    });

    document.getElementById('skew_y').addEventListener('input', (event) => {
      parent.skewY = parseFloat(event.target.value);
      stage.update();
    });

    document.getElementById('rotate').addEventListener('input', (event) => {
      parent.rotate = parseFloat(event.target.value);
      stage.update();
    });

    const rand = (min, max) => {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

  </script>
</body>

</html>